<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form marginTop15">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="账单日期" prop="order_time">
              <el-date-picker
                v-model="form.order_time"
                type="date"
                class="wid220"
                :editable="false"
                placeholder="选择配送日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="商品分类" prop="category_id" class="wid220">
              <el-cascader
                v-model="form.category_id"
                :options="options"
                :props="defaultProps"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品" prop="goods_spu_id">
              <change-goods-input
                ref="changeGoodsInput"
                @clear="
                  () => {
                    this.form.goods_spu_id = '';
                  }
                "
                @sendValue="
                  (data) => {
                    this.form.goods_spu_id = data.id;
                  }
                "
              ></change-goods-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="
                  $refs['userListFrom'].resetFields(),
                    ($refs['changeGoodsInput'].name = '')
                "
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div
          class="main_table marginTop10 row-expand-down"
          style="min-height: 550px"
        >
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
          >
            <el-table-column label="商品名称" prop="name">
              <template slot-scope="scope"
                >{{ scope.row.goods_name }}【{{
                  scope.row.spu_name
                }}】</template
              >
            </el-table-column>
            <el-table-column label="单位" prop="unit" />
            <el-table-column label="用户名称" prop="nickname" />
            <el-table-column label="用户分组  " prop="group_name" />

            <el-table-column
              label="价格"
              prop="account_price"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <div class="mainus_pe">
                  <div v-if="!scope.row.freight_jc">
                    {{ scope.row.account_price }}
                    <svg
                      aria-hidden="true"
                      class="main_page_svg"
                      width="13"
                      height="13"
                      @click="freighta(scope.$index, 'freight_jc')"
                    >
                      <use xlink:href="#icon-commodity_modify" />
                    </svg>
                  </div>
                  <div v-else class="boxnr">
                    <el-input
                      v-model="scope.row.account_price"
                      placeholder="价格"
                      class="wid80"
                    ></el-input>
                    <div class="boxnr">
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft10"
                        width="20"
                        height="20"
                        @click="
                          inputBlur(
                            scope.row.account_price,
                            scope.$index,
                            'freight_jc',
                            'account_price'
                          )
                        "
                      >
                        <use xlink:href="#icon-index_tick" />
                      </svg>
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft10"
                        width="12"
                        height="12"
                        @click="
                          (scope.row.account_price =
                            scope.row.account_price_data),
                            (scope.row.freight_jc = false)
                        "
                      >
                        <use xlink:href="#icon-index_cross" />
                      </svg>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <!-- <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  account_index,
  account_editPrice,
} from "@/api/financial/financialReceivables";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, recursion, category } from "@/utils/index";

export default {
  components: {},
  data() {
    return {
      // 列表数据
      list: {
        list: [],
      },
      listLoading: false,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        order_time: parseTime(new Date(), "{y}-{m}-{d}"),
        goods_spu_id: "",
      },
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      offsetParent: true,
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
    };
  },
  created() {
    // 列表
    this.account_index();
  },
  methods: {
    // 点击排序
    freighta(index, name) {
      if (this.offsetParent) {
        this.list.list[index][name] = !this.list.list[index][name];
      }
    },
    // 焦点离开排序
    inputBlur(val, index, name, type) {
      this.offsetParent = false;
      if (/^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) && val != "") {
        this.list.list[index][name] = !this.list.list[index][name];
        console.log(this.list.list[index]);
        this.offsetParent = true;
        this.goods_change(
          val,
          this.list.list[index].id,
          this.list.list[index].statement,
          type
        );
      } else {
        this.this.$message.error("请输入数字");
      }
    },
    goods_change(val, id, statement, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: id,
                value: val,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, value: val, statement: statement }
      );
      account_editPrice(data).then((res) => {
        if (res.errcode == 0) {
          this.account_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.account_index();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.account_index();
    },
    changePage(page) {
      this.current.page = page;
      this.account_index();
    },
    // 列表
    account_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      account_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          res.data.list.map((e) => {
            e.account_price_data = e.account_price;
            e.freight_jc = false;
            e.down = false;
          });
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },

    // 管理操作
    // 判断表格是否有子项，无子项不显示展开按钮

    // 保存
    formula_save(row, index) {
      let groupArr = [];
      for (let i in row.group) {
        let obj = {
          id: row.group[i].id,
          price: row.group[i].price,
        };
        groupArr.push(obj);
      }
      let form = {
        id: row.id,
        value: JSON.stringify(groupArr),
        send_time: this.form.send_time,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      account_editPrice(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
          this.account_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 120px);
  }
}
.maincg_ul {
  ul {
    padding-left: 80px;
    li {
      margin-left: 40px;
      margin-right: 40px;
      margin-top: 6px;
      margin-bottom: 6px;
      align-items: center;
      span {
        font-size: $font_14;
        color: $colour_3;
      }
      /deep/.el-select {
        margin-left: 5px;
      }
      .maincg_uli {
        margin-left: 5px;
        position: relative;
        .maincg_uli_s {
          position: absolute;
          right: 10px;
          top: 8px;
          z-index: 9;
          use {
            fill: $menuText;
          }
          &:hover {
            cursor: pointer;
            use {
              fill: $menuActiveText;
            }
          }
        }
      }
    }
  }
}
.maincg_bj {
  margin-left: -30px;
  p {
    span {
      display: inline-block;
      width: 56px;
      text-align: right;
    }
    margin-left: 30px;
    color: $menuText;
    font-size: $font_14;
  }
}
.mainus_pe {
  svg {
    vertical-align: -3px;
    margin-left: 30px;
  }
  use {
    fill: $menuText;
  }
  &:hover {
    cursor: pointer;
    use {
      fill: $menuActiveText;
    }
  }
}
</style>
